<template>
  <div id="centreLeft4">
    <div class="bg-color-black ">
        <div class="titles">
          <span>人员监测概况</span>
        </div>
        <div class="bodyHeight" >
          <div class="perbox">
            <div class="peritem peritem1">
              <p class="num">
                <CountTo :startVal='0' :endVal='count' :duration='3000' :decimals='0' />
              </p>
              <p class="name">总人数</p>
            </div>
            <div class="peritem peritem2">
              <p class="num">
                <CountTo :startVal='0' :endVal='manCount' :duration='3000' :decimals='0' />
              </p>
              <p class="name">男</p>
            </div>
            <div class="peritem peritem3">
              <p class="num">
                <CountTo :startVal='0' :endVal='womanCount' :duration='3000' :decimals='0' />
              </p>
              <p class="name">女</p>
            </div>
          </div>
          <!-- 柱状图 -->
          <div class="chart2">
            <BottomLeftChart :cdata="cdata"/>
          </div>
        </div>
    </div>
  </div>
</template>

<script>
import CountTo from 'vue-count-to'
import BottomLeftChart from "@/components/echart/bottom/bottomLeftChart";
import { mapState } from 'vuex'; // 引入mapState
export default {
  data() {
    return {
      count: 0,
      manCount: 0,
      womanCount: 0,
      cdata: {
        category: [],
        barData: [],
      }
    };
  },
  components: {
    BottomLeftChart,
    CountTo
  },
  computed: {
    ...mapState({
      cityId: state => state.system.cityId, // 从Vuex Store中获取cityId
    }),
  },
  mounted() {
    this.getStatics();
    this.$watch('cityId', (newVal, oldVal) => { // 监听cityId的变化
      if (newVal !== oldVal) {
        this.getStatics(); // 当cityId变化时重新请求数据
      }
    });
  },
  methods: {
    getStatics() {
      this.$api.statistics({
        region_id: this.cityId, 
      }).then(res => {
          if(res.code == 0) {
              // console.log('res', res.data)
              this.count = Number(res.data.count);
              this.manCount = Number(res.data.manCount);
              this.womanCount = Number(res.data.womanCount);
             
              // 将返回的对象数据ageGroup进行键值对交换，然后赋值给barData和category
              const ageGroup = res.data.ageGroup;
              // console.log('ageGroup', Object.keys(ageGroup))
              this.cdata.category = Object.keys(ageGroup);
              this.cdata.barData = Object.values(ageGroup);

             
            

          }
      })
    }
  }
};
</script>

<style lang="scss">
#centreLeft4 {
  height: 3.875rem;
  width: 5.45rem;
  box-sizing: border-box;
  // border: 1px solid red;
  
  .bodyHeight {
    height: 3.55rem;
  }
  .perbox {
    display: flex;
    justify-content: space-around;
    padding: 0.375rem 0.1rem 0.2rem;
    text-align: center;
  }
  .peritem {
    background-size: cover;
    width: 105px;
    height: 69px;
    display: flex;
    flex-direction: column;
  }
   .peritem1 {
    background: url('../assets/per1.png') no-repeat center center;
  }
  .peritem2 {
    background: url('../assets/per2.png') no-repeat center center;
  }
  .peritem3 {
    background: url('../assets/per3.png') no-repeat center center;
  }
  .name {
    margin-top: auto;
  }
  .num {
    font-size: 20px;
    font-weight: bold;
  }
  .chart2 {
    height: 2.3125rem;
  }
}
</style>